<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>档案</span>
          <div>
            <el-button type="primary" @click="dialogVisible = true"
              >新增</el-button
            >
          </div>
        </div>
      </template>
      <div class="text item">
        <el-row :span="24">
          <el-col :span="3" class="luzhuangtu">
            <el-tree
              :data="data"
              :props="defaultProps"
              @node-click="handleNodeClick"
            />
          </el-col>
          <el-col :span="20">

            <el-table :data="d.tableData" style="width: 100%">
              <el-table-column prop="staffRecordList[0].department.departmentName" label="部门" width="180" />
              <el-table-column prop="recordName" label="姓名" width="180" />
              <el-table-column prop="staffRecordList[0].positionTable.positionName" label="职位"  width="180" />
              <el-table-column prop="" label="性别"  width="180" >
                <template #default
                              ="scope">
                  {{  scope.row.recordSex==1?"男":"女"}}

                </template>
              </el-table-column>
              <el-table-column prop="address" label="入职日期"  width="180" />
              <el-table-column prop="address" label="上级领导"  width="180" />
            </el-table>
            <el-row justify="center">
              <el-col>
                <el-pagination
                    v-model:currentPage="d.pageNo"
                    v-model:page-size="d.pageSize"
                    :page-sizes="[5,10, 20, 30, 40]"
                    small="small"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="d.total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"/>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-dialog
      v-model="dialogVisible"
      title="新增员工档案"
      width="50%"
      :before-close="handleClose"
    >
      <div class="demo-collapse">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="基本信息" name="1">
            <div class="fromjiben">
              <el-row>
                <el-col :span="6">
                  <span class="spanname">姓名：</span>
                </el-col>
                <el-col :span="18">
                  <el-input v-model="formdata.name" style="width: 300px" />
                </el-col>
              </el-row>
            </div>
            <div class="fromjiben">
              <el-row>
                <el-col :span="6">
                  <span class="spanname">性别：</span>
                </el-col>
                <el-col :span="18">
                  <el-select v-model="formdata.valueSex" class="m-2" placeholder="请选择" style="width: 300px"  :value ="formdata.department">
                    <el-option
                        v-for="item in  formdata.fromsex"
                        :key="item.id"
                        :label="item.value"
                        :value="item.id"
                    />
                  </el-select>
                </el-col>
              </el-row>
            </div>
            <div class="fromjiben">
              <el-row>
                <el-col :span="6">
                  <span class="spanname">部门：</span>
                </el-col>
                <el-col :span="18">

                  <el-select v-model="formdata.valueDepartment"
                             @change="positionMothed"
                             class="m-2" placeholder="请选择" style="width: 300px"  :value ="formdata.department">
                    <el-option
                        v-for="item in  formdata.department"
                        :key="item.departmentId"
                        :label="item.departmentName"
                        :value="item.departmentId"
                    />
                  </el-select>
                </el-col>
              </el-row>
            </div>
            <div class="fromjiben">
              <el-row>
                <el-col :span="6">
                  <span class="spanname">岗位：</span>
                </el-col>
                <el-col :span="18">
                  <el-select v-model="formdata.valuePoition" class="m-2" placeholder="请选择" style="width: 300px"  :value ="formdata.department"
                             @change="superior">
                    <el-option
                        v-for="item in  formdata.position"
                        :key="item.positionId"
                        :label="item.positionName"
                        :value="item.positionId"
                    />
                  </el-select>
                </el-col>
              </el-row>
            </div>
            <div class="fromjiben">
              <el-row>
                <el-col :span="6">
                  <span class="spanname" >直接上级：</span>
                </el-col>
                <el-col :span="18">
                  <el-input v-model="formdata.positionOne.positionName" style="width: 300px" />
                </el-col>
              </el-row>
            </div>
          </el-collapse-item>
          <el-collapse-item title="OA账号" name="2">
            账号：<el-input v-model="userData.userName" style="width: 300px" />
            密码：<el-input v-model="userData.password" style="width: 300px" />
          </el-collapse-item>
          <el-collapse-item title="详细信息" name="3">
            内容
          </el-collapse-item>

        </el-collapse>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
const input = ref("");
import {ElMessage, ElMessageBox} from "element-plus";
import axios from "axios";
import {useRouter} from "vue-router";
const router=useRouter()
const dialogVisible = ref(false);
// const tableData = ref([])
const d = reactive({
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:5,
  //数据
  tableData: [],
});
const ALltableData=ref([])
const getTabelData=()=>{//分页，这里没必要管一样就行
  let data =JSON.parse(JSON.stringify(ALltableData.value));//把数据转为JSON格式
  let shu = data.splice(
      (d.pageNo - 1) * d.pageSize,
      d.pageSize
  )
  d.tableData = shu ;
}

const handleSizeChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageSize = val ;
  d.pageNo = 1;
  getTabelData();
}

const handleCurrentChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageNo = val;
  getTabelData();
}
//提交表单
const submitForm = ()=>{
  dialogVisible.value =false;
  formdata.valueSuperior = formdata.positionOne.positionId;
  let json = JSON.stringify(formdata);
  var forms = new FormData();
  forms.append("json", json);
  console.log(json)
  const url = "http://localhost:1688/record/saveRecord";
    axios.post(url,forms).then((data)=>{
      const val =data.data;
      console.log(val)
      if(val.code==403){
        ElMessage.error("权限不足")
      }else {
        userData.userPosition=data.data.data;
        if(userData.userName==""||userData.password==""){

        }else{
          axios.post("http://localhost:1688/login/insertUser",userData).then((data)=>{
            console.log(data)
          })
        }
        router.go(0);
      }



  });


}
const superior =()=>{
  let id = formdata.valuePoition;
  console.log( formdata.valuePoition)
  const urlSuperior = `http://localhost:1688/position_con/superiorMethod/${id}`;
  console.log(urlSuperior)
  axios.post(urlSuperior).then((data)=>{
    console.log(data.data.data)
    formdata.positionOne =data.data.data
  });
}
//通过部门来获取职业
const positionMothed = ()=>{
    let id = formdata.valueDepartment
  //访问所有的职位
  const urlPosition =`http://localhost:1688/position_con/allPosition/${id}`;
  console.log(urlPosition)
  axios.get(urlPosition).then((data)=>{
    formdata.position =data.data.data
    console.log(formdata.position,"fggg")
  });
  formdata.valuePoition = "";
  formdata.positionOne.positionName ="";

}
var fun1 = async function(){
  // #shujuyuan
  const url = "http://localhost:1688/recordDubbo/publicRecordDubbo";
  await  axios.get(url).then((data)=>{
    var data2=data.data.data
    ALltableData.value = data2;//放入表格
    d.total = data.data.data.length;//获得它的长度
    getTabelData();//调用方法
  });
}
var fun2 = async function(){
  //访问部门
  const urlDepartment = "http://localhost:1688/department_con/alldepartments";
  await axios.get(urlDepartment).then((data)=>{
    console.log(data.data.data)
    formdata.department =data.data.data
  });
}
//进来就获取的数据
onMounted(()=>{
  fun1();
  //访问公共的
  fun2();


})

const handleClose = (done: () => void) => {
  ElMessageBox.confirm("Are you sure to close this dialog?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};
interface Tree {
  label: string;
  children?: Tree[];
}
`    `;

const handleNodeClick = (data: Tree) => {
  console.log(data);
};
const activeNames = ref(["1"]);
const handleChange = (val: string[]) => {
  console.log(val);
};
const data: Tree[] = [
  {
    label: "摆烂总部",
    children: [
      {
        label: "人事部",
        children: [
          {
            label: "招聘部门",
          },
          {
            label: "档案部门",
          },
        ],
      },
    ],
  },
];
const userData =reactive({
  userName:"",
  password:"",
  userPosition:"",
})

const formdata = reactive({
  valueDepartment: "",
  valueSex: "",
  valuePoition:"",
  valueSuperior:"",
  name:"",
  positionOne:{positionName:""},
  fromsex:[{
    id:1,
    value:"男"
  },{
    id:2,
    value:"女"
  }]
});

const defaultProps = {
  children: "children",
  label: "label",
};
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.luzhuangtu {
  border-right: 1px solid var(--el-card-border-color);
  margin: 5px;
}
.fromjiben {
  display: flex;

  justify-content: center;
  margin: 10px;
}
.spanname {
  line-height: 30px;
  display: inline-block;

}
</style>
